<template>
	<view class="header">
		<input type="text" confirm-type="search" v-model="inputVal" @confirm="confirmHandler"/>
		<icon class="search-icon" type="search" size="16"></icon>
		<icon class="clear-icon" type="clear" size="16" color="#ccc" v-if="inputVal" @click="clearInput"></icon>
	</view>
</template>

<script>
export default {
	props:["keyword"],
	data() {
		return {
			// 输入框的内容
			inputVal: ''
		};
	},
	// 监听：因为子组件data函数执行比父组件onload早
	watch:{
		keyword(newVal){
			this.inputVal = newVal
		}
	},
	methods: {
		// 清空内容
		clearInput() {
			this.inputVal = '';
		},
		// 点击回车触发事件
		confirmHandler() {
			if(this.inputVal) {
				// 子传父
				this.$emit('search',this.inputVal)
			}
		}
	}
};
</script>

<style lang="less" scoped>
.header {
	height: 120rpx;
	background-color: #eee;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	input {
		background-color: #fff;
		height: 60rpx;
		width: 720rpx;
		padding-left: 74rpx;
		box-sizing: border-box;
	}
	.search-icon {
		position: absolute;
		left: 44rpx;
	}

	.clear-icon {
		position: absolute;
		right: 44rpx;
		z-index: 999;
		left: auto;
	}
}
</style>